<template>
	<div class="flexcenter">
		<div class="max_width paddingtb">
			<div class="textcenter text_ft color_zero">评价订单</div>
			<div class="flexcenter margin_top2">
				<div class="text_b color_six margin_right2">订单号：{{ info.order_no }}</div>
				<div class="text_b color_six">{{ info.paytime_text }}</div>
			</div>
			<div class="margin_top6 ffffff flexleft">
				<div class="mainpadding textcenter">
					<img class="imgBox" :src="info.image_text" alt="">
					<div class="text_d color_three word_wrap margin_top1" style="width: 220px;">
						{{ info.lesson_name }}
					</div>
				</div>
				<div class="line"></div>
				<div class="mainpadding flex1">
					<div class="flexleft">
						<div class="text_b color_three margin_right6 white_nowrap">商品评价</div>
						<div class="flexleft">
							<div class="flexleft margin_right6" @click="composite_evaluate = 5">
								<div class="margin_right1" :class="composite_evaluate == 5 ? 'face1_active' : 'face1'">
								</div>
								<div class="text_b" :class="composite_evaluate == 5 ? 'color_theme' : 'color_nine'">好评</div>
							</div>
							<div class="flexleft margin_right6" @click="composite_evaluate = 3">
								<div class="margin_right1" :class="composite_evaluate == 3 ? 'face2_active' : 'face2'">
								</div>
								<div class="text_b" :class="composite_evaluate == 3 ? 'color_theme' : 'color_nine'">中评</div>
							</div>
							<div class="flexleft" @click="composite_evaluate = 1">
								<div class="margin_right1" :class="composite_evaluate == 1 ? 'face3_active' : 'face3'">
								</div>
								<div class="text_b" :class="composite_evaluate == 1 ? 'color_theme' : 'color_nine'">差评</div>
							</div>
						</div>
					</div>
					<div class="margin_top">
						<div class="flex">
							<div class="text_b color_three white_nowrap margin_right6">评价内容</div>
							<div class="flex1">
								<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none"
									show-word-limit maxlength="50" placeholder="请输入内容" v-model="content">
								</el-input>
								<!-- <div class="flexleft margin_top1">
									<div class="noImage margin_right1">
										<img src="../../static/image/course.png" alt="">
									</div>
									<div class="noImage">
										<img src="../../static/image/home/upimg.png" alt="">
									</div>
								</div> -->
								<el-form label-width="0px">
									<el-form-item>
										<ul class="flexleft margin_top1">
											<li v-for="(item, index) in ossFileUploads" :key="index"
												style="position: relative;" class="noImage margin_right1 pointer">
												<img :src="item.filePath.fullurl" class="noImage"
													@click.stop="dialogVisible = true; dialogImageUrl = item.filePath.fullurl;">
												<i style="color: #3478f5;position: absolute;top: 5px;right: 5px;font-size: 16px;"
													class="el-icon-circle-close " @click.stop="handlerDel(item, index)"></i>
											</li>
										</ul>
									</el-form-item>
									<el-form-item>
										<el-upload :headers="{
											'Token': tokens
										}" class="avatar-uploader" :limit="4" action="http://kaoshi.kongzhongwangluo.top/api/common/upload"
											:show-file-list="false" multiple :on-success="handleAvatarSuccess"
											:before-upload="beforeAvatarUpload" :on-exceed="handleExceed">
											<el-button size="small" type="primary">点击上传图片</el-button>
										</el-upload>
										<font class="upload-text">只能上传jpg/png文件，最多可以上传4张图片</font>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mainpadding ffffff flexcenter margin_top">
				<div class="submitBtn" @click="submit">立即发布</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getOrderInfo, getCommOrder } from "@/API/home"
export default {
	data() {
		return {
			id: "",//订单id
			info: {},//订单详情
			composite_evaluate: 5,//1=差评，3=中评，5=好评
			content: "",//评价内容
			images: "",//评价图片
			ossFileUploads: [], //图片
			tokens: "",
		}
	},
	created() {
		this.tokens = localStorage.getItem("token")
		this.id = this.$route.query.id
		this.getInfo(this.id)
	},
	methods: {
		async getInfo(id) {
			let res = await getOrderInfo({ id })
			this.info = res.data.data
		},
		// 上传图片
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
			const isLt2M = file.size / 1024 / 1024 < 10;
			if (!isJPG) {
				this.$message.error('上传头像图片只能是jpg或者png格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		handleAvatarSuccess(res, file) {
			if (res.code !== 1) {
				this.$message.error(res.msg);
				return false;
			}
			// 图片上传成功，添加到图片数组中，进行渲染
			this.ossFileUploads.push({
				filePath: res.data,
				type: "blood",
				dataId: file.uid
			})
			this.$message.success('上传成功')
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 4 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		// 删除图片
		handlerDel(item, index) {
			this.ossFileUploads.splice(index, 1)
			this.$message.success('删除成功')
		},
		async submit() {
			if (!this.content) {
				this.$message.error("请输入评论内容")
				return false
			}
			let arr = []
			this.ossFileUploads.forEach(item => {
				arr.push(item.filePath.url)
			})
			let res = await getCommOrder({
				order_id: this.id,//订单id
				composite_evaluate: this.composite_evaluate,//1=差评，3=中评，5=好评
				content: this.content,//评价内容
				images: arr.join(),//评价图片
			})
			if (res.data.code == 1) {
				this.$message.success(res.data.msg)
				this.content = ""
				this.ossFileUploads = []
				this.$router.go(-1)
			} else {
				this.$message.error(res.data.msg)
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.imgBox {
	width: 126px;
	min-width: 126px;
	height: 74px;
	border-radius: 4px 4px 4px 4px;
}

.line {
	width: 0px;
	height: 314px;
	border: 1px solid #F3F3F3;
}

.submitBtn {
	width: 239px;
	height: 47px;
	text-align: center;
	line-height: 47px;
	background: #3478F5;
	border-radius: 8px 8px 8px 8px;
	font-size: 18px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
}

.noImage {
	width: 50px;
	min-width: 50px;
	height: 50px;
	border-radius: 2px 2px 2px 2px;

	img {
		width: 100%;
		height: 100%;
	}
}
</style>